<template>
  <div>
      <h3>vuex 组件</h3>
      <button @click="changeValue">操作 vuex 中的数据</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions, createNamespacedHelpers } from 'vuex';
// const { mapState, mapActions } = createNamespacedHelpers('userInfo')    // 基于某个命名空间来创建一个包含辅助函数的对象

  export default {
      data(){
         return {
            localName:"李四",
         }
      },
      computed:{     //在计算属性中引入是为了不用每次写这么长串 this.$store.state.username      vue3中使用 useStore API 拿到 store 
//state:
         username () {
            return this.$store.state.username
         },
         moduleState () {
            return this.$store.state.userInfo.moduleState     // 获取子模块的state数据  
         },
         // moduleState: {                                       // 这种写法可以解决使用 v-model 绑定数据时 直接修改 state 中的数据的问题
         //    get () {
         //       return this.$store.state.userInfo.moduleState
         //    },
         //    set (value) {
         //       this.$store.commit('updateMessage', value)
         //    }
         // },

      // 使用辅助函数
         ...mapState(['username']),
         ...mapState({                    //也可以使用对象的形式，用于给 数据 别名
               // 箭头函数返回的方式
               username: state => state.username,
               // 别名
               countAlias: state => state.username,
               // 为了能够使用 `this` 获取局部状态，必须使用常规函数
               // countPlusLocalState (state) {
               //    return state.username + this.localCount
               // }
            }),
         ...mapState({                    //获取子模块中的数据
               moduleState: state => state.userInfo.moduleState,
            }),
         ...mapState("userInfo", {         //将模块的空间名称字符串作为第一个参数,这样所有绑定都会自动将该模块作为上下文。              
               moduleState: state => state.moduleState,
            }),


//——————————————————————————————————————————————————————————————————————————————————————————————————
//getters
         // 第一种方法：   通过调用函数获取getter，可以把组件中的数据传过去做参数
         getTodoById(){
            return this.$store.getters.getTodoById(2)
         },
         // 第二种方法：   通过属性获取getter
         setUsername(){   
            return this.$store.getters.setUsername
         },
         moduleGetter(){               // 获取子模块的getter
            return this.$store.getters["userInfo/moduleGetter"]
         },

      // 使用辅助函数
         ...mapGetters(["setUsername", "getTodoById"]),
         // ...mapGetters({setUsernamePlus:"setUsername"}), //也可以使用对象的形式，用于给getter别名
         ...mapGetters({
            moduleGetter:'userInfo/moduleGetter',
         }),
         ...mapGetters('userInfo', ['moduleGetter'])
      },


//——————————————————————————————————————————————————————————————————————————————————————————————————
      methods:{
//mutations
         ...mapMutations(['changeCount']),
         ...mapMutations({
            add: 'changeCount' //设置别名
         }),
         ...mapMutations({
            moduleMutation:'userInfo/moduleMutation'
         }),
         ...mapMutations('userInfo', ['moduleMutation']),

//——————————————————————————————————————————————————————————————————————————————————————————————————
//actions
         ...mapActions(['asyncChangeCount']),
         ...mapActions({
            add: 'increment' //设置别名
         }),
         ...mapActions({
            moduleAction: 'userInfo/moduleAction' 
         }),
         ...mapActions('userInfo', ['moduleAction']),

//——————————————————————————————————————————————————————————————————————————————————————————————————

         changeValue(){
// State
            console.log(this.username);
            // console.log(this.moduleState);      //子模块数据

// Getter
            // console.log(this.setUsername, this.getTodoById("你好!!!"));
            // console.log(this.moduleGetter);

// Mutation
            // this.$store.commit("changeCount", {param:1}, {root:true})      //最后的参数是option 这里表示这个mutation是 跟state 的
            // this.$store.commit({                                           //对象风格的提交方式
            //    type:"changeCount",
            //    param:10
            // })
            // this.changeCount({param:20})
            // console.log(this.$store.state.count);
            // this.moduleMutation({param:1})
            // console.log(this.moduleState);

// Action
            // this.$store.dispatch("asyncChangeCount", {val:10}, {root: true})
            // this.$store.dispatch({    //对象风格的提交方式
            //    type:"asyncChangeCount",
            //    val:10
            // })
            // console.log(this.$store.state.asyncCount);
            // this.asyncChangeCount({val:10})
            // console.log(this.$store.state.asyncCount);
            this.moduleAction({param:1})
            console.log(this.moduleState);
         //action中执行异步操作
            // this.$store.dispatch("asyncChangeCount2", {val:20}, {root: true}).then((res)=>{
            //    // console.log(res);
            // })
         },
      },

  }
</script>
<style lang='less' scoped>

</style>